<template>
  <demoBlock title="禁用菜单">
    <vcu-dropdown-menu>
      <vcu-dropdown-item v-model="value" :options="options" disabled />
      <vcu-dropdown-item title="筛选" ref="item">
        <vcu-cell center title="包邮">
          <template #right-icon>
            <vcu-switch v-model="switch1" size="24" />
          </template>
        </vcu-cell>
        <vcu-cell center title="团购">
          <template #right-icon>
            <vcu-switch v-model="switch2" size="24" />
          </template>
        </vcu-cell>
        <div style="padding: 5px 16px">
          <vcu-button type="primary" block round @click="onConfirm"> 确认 </vcu-button>
        </div>
      </vcu-dropdown-item>
    </vcu-dropdown-menu>
  </demoBlock>
</template>

<script>
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    const item = ref(null);
    const value = ref(0);
    const switch1 = ref(false);
    const switch2 = ref(false);
    const options = [
      { text: "全部商品", value: 0 },
      { text: "新款商品", value: 1 },
      { text: "活动商品", value: 2 },
    ];
    const onConfirm = () => {
      item.value.toggle();
    };

    return {
      item,
      value,
      switch1,
      switch2,
      options,
      onConfirm,
    };
  },
});
</script>
